import { checkPermission, checkRole, isAdmin } from '@/api/auth';

/**
 * 权限控制指令
 * 用于在模板中控制元素的显示/隐藏
 */

/**
 * v-permission 指令
 * 控制元素是否显示基于用户是否有指定权限
 */
export const permission = {
  async mounted(el, binding) {
    const permission = binding.value;
    if (permission) {
      try {
        const hasPermission = await checkPermission(permission);
        if (!hasPermission) {
          el.style.display = 'none';
        }
      } catch (error) {
        console.error('权限检查失败:', error);
        // 出错时默认不显示
        el.style.display = 'none';
      }
    }
  },
  async updated(el, binding) {
    const permission = binding.value;
    if (permission) {
      try {
        const hasPermission = await checkPermission(permission);
        if (!hasPermission) {
          el.style.display = 'none';
        } else {
          el.style.display = '';
        }
      } catch (error) {
        console.error('权限检查失败:', error);
        // 出错时默认不显示
        el.style.display = 'none';
      }
    }
  }
};

/**
 * v-role 指令
 * 控制元素是否显示基于用户是否有指定角色
 */
export const role = {
  async mounted(el, binding) {
    const role = binding.value;
    if (role) {
      try {
        const hasRole = await checkRole(role);
        if (!hasRole) {
          el.style.display = 'none';
        }
      } catch (error) {
        console.error('角色检查失败:', error);
        // 出错时默认不显示
        el.style.display = 'none';
      }
    }
  },
  async updated(el, binding) {
    const role = binding.value;
    if (role) {
      try {
        const hasRole = await checkRole(role);
        if (!hasRole) {
          el.style.display = 'none';
        } else {
          el.style.display = '';
        }
      } catch (error) {
        console.error('角色检查失败:', error);
        // 出错时默认不显示
        el.style.display = 'none';
      }
    }
  }
};

/**
 * v-admin 指令
 * 控制元素是否显示基于用户是否是管理员
 */
export const admin = {
  async mounted(el) {
    try {
      const isAdminUser = await isAdmin();
      if (!isAdminUser) {
        el.style.display = 'none';
      }
    } catch (error) {
      console.error('管理员检查失败:', error);
      // 出错时默认不显示
      el.style.display = 'none';
    }
  },
  async updated(el) {
    try {
      const isAdminUser = await isAdmin();
      if (!isAdminUser) {
        el.style.display = 'none';
      } else {
        el.style.display = '';
      }
    } catch (error) {
      console.error('管理员检查失败:', error);
      // 出错时默认不显示
      el.style.display = 'none';
    }
  }
};

/**
 * 注册所有权限相关指令
 * @param {Object} app - Vue应用实例
 */
export const registerAuthDirectives = (app) => {
  app.directive('permission', permission);
  app.directive('role', role);
  app.directive('admin', admin);
};